import './index.scss';
import { Table,Button } from 'antd';
import React, { useState,useEffect } from 'react';
import coupon from '../../../store/Coupon/coupon';
import {useNavigate} from 'react-router-dom'
import {observer} from 'mobx-react'
import store from "../../../store/index"
const CouponList=()=>{
    const navigate = useNavigate();
    // 编辑
    const change = (val)=>{
        console.log(val);
        navigate('/home/CouponManagement/editCoupon',{replace: false,state: {
                row:{
                    id:val.id,
                    couponName:val.couponName,
                    associateApp:val.associateApp,
                    couponType:val.couponType,
                    denomination:val.denomination,
                    orderAmount:val.orderAmount,
                    applicableGoods:val.applicableGoods,
                    channelId:val.channelId,
                    validityTime:val.validityTime,
                    instructions:val.instructions,
                    expirationTime:val.expirationTime,
                    usageTime:val.usageTime,
                    couponStatus:val.couponStatus
                }
            }})
    }
    const [selectionType, setSelectionType] = useState('checkbox');
    const columns = [
        {
            title: '优惠券名称',//表格列名
            dataIndex: 'couponName',//对应数据字段
            key: 'couponName',//该列的唯一值
        },
        {
            title: '分类',
            dataIndex: 'couponType',
            key: 'couponType',
        },
        {
            title: '优惠名额折扣',
            dataIndex: 'denomination',
            key: 'denomination',
        },
        {
            title: '使用条件',
            dataIndex: 'orderAmount',
            key: 'orderAmount',
        },
        {
            title: '有效期',
            dataIndex: 'validityTime',
            key: 'validityTime',
        },
        {
            title: '状态',
            dataIndex: 'couponStatus',
            key: 'couponStatus',
        },
        {
            title: '关联app',
            dataIndex: 'associateApp',
            key: 'associateApp',
        },
        {
            title: '操作',
            render:(_,record)=>(
                <Button type={"link"} onClick={()=>{change(record)}}>编辑</Button>
            )

        },
    ];
    useEffect(() => {
        if (coupon.count.length === 0) {
            coupon.showAllCoupon()
        }
    }, [])
    const data= coupon.count
    return <div>
        <Table  
            rowSelection={{type: selectionType,
                onChange( keys,rows){
                    store.coupon.setSleContent(keys)
                    // console.log(rows);
                }}}
            columns={columns} 
            dataSource={data}
            rowKey={(record) => record.id}
            pagination={{pageSize:5}}
            style={{marginTop:'16px'}}/>
    </div>
}
export default observer (CouponList);